<template>
	<!-- <view class="om-button-bg"> -->
	<view v-if="buttons.length" class="tui-flex om-bottom om-toolbar" style="padding: 0 5px;">
		<block v-for="(button, index) in buttons" :key="index">
			<view
				:class="'tui-col-' + 12 / buttons.length + ' ' + (button.bgcolor || '')"
				class="tui-flex tui-align-center tui-vertical-center"
				style="height: 100%;border-right: solid 2rpx #E5E5E5;"
				@click="btnChange(index)"
				hover-class="tui-item-hover"
			>
				<view v-if="button.iconCls" class="tui-grid-icon">
					<tui-icon :name="button.iconCls" :size="button.size" :color="button.color"></tui-icon>
				</view>
				<text class="tui-grid-label" :style="'color:'+ button.color" style="height: 100%;font-size: large;">{{ button.text }}</text>
			</view>
		</block>
	</view>
	<!-- </view> -->
</template>

<script>
	export default {
		props: {
			/* 按钮对象数组，
				{
					text:		按钮名称[String],
					iconCls:	按钮图标样式[String],
					func:		方法名[String]}
					link:       跳转路径
					bgcolor:	按钮背景色
				}
			*/
			buttons: {
				type: Array,
				default() {
					return [];
				}
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			btnChange(index) {
				this.$emit('btnChange', index);
			},
		}
	}
</script>
<style>
.om-toolbar {
	box-shadow: 0px 4rpx 4rpx #929191; /*for Android*/
	-webkit-box-shadow: 0px 4rpx 4rpx #929191; /*for IOS*/
}

.tui-grid-icon {
	width: 60rpx;
	height: 60rpx;
	margin: 0 auto;
	text-align: center;
	vertical-align: middle;
}

.tui-grid-label {
	display: flex;
	font-weight: 400;
	color: #FFF;/* #333; */
	font-size: 28rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 0;
	align-items: center;
	justify-content: center;
}
.tui-item-hover {
	background: #aaa !important;
}
.tui-vertical-center:nth-last-child(1){
	border-right: 0 !important;
}
</style>
